<template>
    <el-dialog class="edit-dialog" :title="title" :visible.sync="dialogFormVisible" width="650px">
        <el-form ref="formRef" :model="form" label-width="80px" size="small" style="max-height: 410px; overflow: auto;">
            <el-form-item label="职位名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <!-- 看看提交方法里面，已经拿到选中的值 -->
            <el-form-item label="权限设置">
                <el-tree
                        :props="defaultProps"
                        ref="tree"
                        :data="treeData"
                        node-key="id"
                        show-checkbox
                        default-expand-all>
                </el-tree>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="submits" size="small">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {Message} from 'element-ui';
    export default {
        data() {
            return {
                title: '菜单授权',
                dialogFormVisible: false,
                form: {
                    id: '',
                    rules: [],
                    name: '' // 只是查看，不用提交
                },
                defaultProps: {
                    children: 'childlist',
                    label: 'name'
                },
                treeData: [],
                rules_id:[]
            };
        },
        methods: {
            init(id) {
                this.dialogFormVisible = true;
                this.form.id = id || '';
                // this.treeData = this.$store.state.menu.permissionslist; // 最终是要从后台获取，或者在store里面配置好
                console.log(this.form);
                this.$http.post("userrule/lists",{id:id}).then((response) => {
                    this.treeData =response.data.rule_list;
                    this.form.rules = response.data.rules;
                    this.form.name = response.data.name;
                    //console.log(this.form.rules);
                    this.$refs.tree.setCheckedKeys(response.data.rules);
                    console.log(this.form.id);
                });
            },

            
            submits() {
                let res = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
                console.log(res) // 这个是获取到的选中的值
               this.form.rules = res;
                var thas=this;
                this.$refs['formRef'].validate((valid) => {
                    if (valid) {

					   var path="roles/edit"
                      
					  this.$http.post(path,this.form).then((response) => {
					  		
							Message({
								type: 'success',
								message: '保存成功'
							});
							 setTimeout(() => {
                                 console.log('ss submit!!');
								thas.$emit("refreshDataList");
							}, 1500) 
					  });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
    };
</script>

<style lang="scss">
    .edit-dialog {
        .el-dialog__body {
            padding-top: 0 !important;
        }

        .el-form-item {
            margin-bottom: 5px !important;
        }

        .el-form--label-top .el-form-item__label {
            padding-bottom: 0 !important;
        }

        .el-select {
            width: 100%;
        }

        .el-upload--picture-card {
            width: 100px;
            height: 100px;
            line-height: 100px;
        }
    }
</style>
